<template>
  <view class="footer">
    <view class="already-discount" v-if="false"><text>已优惠￥{{discountAmount}}</text></view>
    <view class="content">
      <!-- 客服 -->
      <view class="customer-service" @click="onContactService">
        <i-icon icon="icon54" size="56rpx" color="#fff"></i-icon>
        <text class="text">客服</text>
      </view>
      <!-- 购物车 -->
      <view class="cart">
        <image class="img" src="https://files.yzsheng.com/client/commodity/peo1.png" v-if="cartList.length > 0"  @click="show = true"></image>
        <image class="img" src="https://files.yzsheng.com/client/commodity/peo2.png" v-else></image>
        <u-badge type="error" :count="cartNum" :offset="[54, 68]" v-if="cartList.length > 0"></u-badge>
      </view>
      <!-- 价格 -->
      <view class="price">
        <view class="flex flex-ai-c" v-if="calcing">
          <text class="total">计算中...</text></text>
        </view>
        <view class="flex flex-ai-c" v-else>
          <text class="total">￥<text class="strong">{{totalAmount}}</text></text>
          <text class="discount" v-if="cartList.length > 0">￥{{originAmount}}</text>
        </view>
        
        <view class="flex flex-ai-c" v-if="cartList.length > 0">
          <text class="span" v-if="!calcing">包含预估工时费{{totalServiceFee}}元</text>
        </view>
      </view>
      <!-- 去结算按钮 -->
      <view class="submit" :class="{active: cartList.length > 0}" @click="onSubmit"><text>去结算</text></view>
    </view>
    
    <u-popup mode="bottom" v-model="show" border-radius="30">
      <view class="cart-content">
        <view class="already-discount" style="color: #FF4B44;"><text>已优惠￥{{discountAmount}}</text></view>
        <view class="cart-list">
          <scroll-view scroll-y="true" :style="{height: cartListHeight}">
            <view class="classify-box" v-for="(item, index) in cartList" :key="index">
              <view class="classify-title">
                <view class="flex flex-ai-c flex-jc-sb">
                  <text class="span">{{item.maintenance_Type_Name}}</text>
                  <view class="all-clear flex flex-ai-c" v-if="index === 0" @click="onChangeNum('clear')">
                    <i-icon icon="iconshanchu2" color="#666" size="32rpx"></i-icon>
                    <text class="clear">全部清空</text>
                  </view>
                </view>
                <!-- <view class="tips">
                  <text>10000km或6个月</text>
                  <text class="red">机油参考用量6L</text>
                </view> -->
              </view>
              <view class="list">
                <view class="cell" v-for="(i, k) in item.maintenanceGoodsLists" :key="k" :class="{remove: i.amount <= 0, animate: animate}">
                  <image class="img" :src="i.pic_URL || errorImg"></image>
                  <view class="info">
                    <view class="title">
                      <text>{{i.goods_Name}}</text>
                    </view>
                    <view class="tags" v-if="item.maintenance_Type_Name === '机油'">
                      <text class="text">全合成</text>
                      <text class="text">5W-40</text>
                      <text class="text">SP</text>
                      <text class="text">4L</text>
                    </view>
                    <view class="bottom-box">
                      <view class="left">
                        <text class="price">￥<text class="strong">{{i.sale_Price}}</text></text>
                        <text class="num">x1</text>
                      </view>
                      <view class="right">
                        <!-- 计数器 -->
                        <view class="num-box flex flex-ai-c">
                          <view class="btn less" @click="onChangeNum('less', i, item.id)">
                            <u-icon name="minus" size="20" color="#3d3d3d" />
                          </view>
                          <input
                            type="number"
                            v-model="i.amount"
                            class="cont"
                            disabled
                          />
                          <view class="btn add" @click="onChangeNum('add', i, item.id)">
                            <u-icon name="plus" size="24" color="#3d3d3d" />
                          </view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view></view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      cartListHeight: '',
      totalServiceFee: 0,
      calcing: this.cartList.length > 0,
      errorImg: 'https://files.yzsheng.com/client/index/carMaintenance/default.png',
      animate: false,
    }
  },
  props: {
    cartList: {
      type: Array,
      default: () => {
        return []
      }
    },
    myLoveCar: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  watch: {
    cartList(newVal, oldVal) {
      if(newVal.length <= 0) {
        this.totalServiceFee = 0
        this.show = false
      } else {
        this.totalServiceFee = 0
        this.calcing = true
        if(this.myLoveCar && this.myLoveCar.car_Id) {
          this.$u.debounce(this.calcServiceFee, 500)
        }
      }
    },
    myLoveCar(newVal, oldVal) {
      if(newVal && this.cartList.length > 0) {
        this.calcing = true
        this.$u.debounce(this.calcServiceFee, 500)
      } else {
        this.totalServiceFee = 0
      }
    },
    show(newVal, oldVal) {
      if(newVal) {
        this.$nextTick(() => {
          uni.createSelectorQuery().in(this).select('.cart-list').boundingClientRect(res => {
            this.cartListHeight = res.height + 'px'
          }).exec()
        })
      } else {
        this.cartListHeight = ''
      }
    }
  },
  computed: {
    // 购物车数量
    cartNum() {
      let num = 0
      this.cartList.map(item => {
        num += Number(item.serCount)
      })
      return num
    },
    // 已优惠金额
    discountAmount() {
      let num = 0
      this.cartList.map(item => {
        item.maintenanceGoodsLists.map(i => {
          if(Number(i.sale_Price) > 0 && Number(i.original_Price) > Number(i.sale_Price)) {
            num += (Number(i.original_Price) - Number(i.sale_Price)) * Number(i.amount)
          }
        })
      })
      return parseFloat(num).toFixed(2)
    },
    // 计算原价
    originAmount() {
      let num = 0
      this.cartList.map(item => {
        item.maintenanceGoodsLists.map(i => {
          // if(Number(i.sale_Price) > 0 && Number(i.original_Price) > Number(i.sale_Price)) {
          //   num += Number(i.original_Price) * Number(i.amount)
          // }
          num += Number(i.original_Price) * Number(i.amount)
        })
      })
      return parseFloat(num).toFixed(2)
    },
    // 计算总金额
    totalAmount() {
      let num = 0
      this.cartList.map(item => {
        item.maintenanceGoodsLists.map(i => {
          if(!i.isVisualGoods) {
            num += Number(i.sale_Price) * Number(i.amount)
          }
        })
      })
      num += Number(this.totalServiceFee)
      return parseFloat(num).toFixed(2)
    },
    // // 工时费
    // totalServiceFee() {
    //   let num = 0
    //   this.cartList.map(item => {
    //     item.maintenanceGoodsLists.map(i => {
    //       num += Number(i.service_Fee)
    //     })
    //   })
    //   return parseFloat(num).toFixed(2)
    // }
  },
  methods: {
    onChangeNum(type, data, pid) {
      let status = type === 'less' && data.amount === 1
      if(status) {
        this.animate = true
        data.amount--
      }
      setTimeout(() => {
        this.animate = false
        this.$emit('onChangeNum', {
          type,
          data,
          pid
        })
      }, status ? 300 : 0)
    },
    // 点击结算
    onSubmit() {
      if(this.cartList.length <= 0) return false
      if(!this.myLoveCar || JSON.stringify(this.myLoveCar) === '{}') {
        uni.showModal({
          content: '您还没有爱车，请先添加爱车后再试！',
          confirmText: '去添加',
          confirmColor: '#FBB000',
          success: res => {
            if(res.confirm) {
              if(uni.getStorageSync('token')  && uni.getStorageSync('token') !== '') {
                uni.navigateTo({
                  url: '/pages_common/addYourCar/addYourCar?type=120&pageFrom=doMaintenance'
                })
              } else {
                uni.setStorageSync('launchFlag', false)
                uni.navigateTo({
                  url: '/pages_logins/login/login'
                })
              }
            }
          }
        })
        return false
      }
      let data = {
        myLoveCar: this.myLoveCar,
        cartList: this.cartList
      }
      this.$store.commit('maintenanceOrderInfo', data)
      // #ifdef H5
      sessionStorage.maintenanceOrderInfo = JSON.stringify(data)
      // #endif
      uni.navigateTo({
        url: '/pages_order/confrimMaintenance/confrimMaintenance'
      })
    },
    // 点击联系客服
    onContactService() {
      uni.makePhoneCall({
        phoneNumber: this.$store.state.serviceNumber.number
      })
    },
    // 计算服务费
    async calcServiceFee() {
      let list = []
      this.cartList.map(item => {
        item.maintenanceGoodsLists.map(i => {
          list.push({
            maintenance_Type_Id: i.maintenance_Type_Id,
            maintenance_Goods_Id: i.id,
            count: i.amount
          })
        })
      })
      try{
        let res = await this.$api.maintenanceOrder.GetServiceFeeByGoods({
          configuration_Id: `${this.myLoveCar.car_Id}`,
          getServiceFeeGoodsList: list
        })
        let num = 0
        if(res.data.length > 0) {
          res.data.map(item => {
            num += item.svcPrcTotal
          })
        }
        this.calcing = false
        this.totalServiceFee = parseFloat(num).toFixed(2)
      }catch(e){
        this.calcing = false
      }
    }
  }
}
</script>

<style lang="scss">
.footer{
  position: fixed;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 10002;
  background-color: #3D3D3D;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .already-discount{
    height: 44rpx;
    background-color: #FFF4C5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #999;
  }
  .content{
    display: flex;
    align-items: center;
    height: 110rpx;
    overflow: visible;
    position: relative;
    z-index: 99999;
    background-color: #3D3D3D;
    .customer-service{
      padding: 0 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .text{
        font-size: 24rpx;
        color: #fff;
      }
    }
    .cart{
      width: 104rpx;
      height: 110rpx;
      position: relative;
      .img{
        width: 104rpx;
        height: 145rpx;
        position: absolute;
        left: 0;
        bottom: 0;
      }
    }
    .price{
      flex: 1;
      margin-left: 24rpx;
      .total{
        font-size: 24rpx;
        color: #fff;
        .strong{
          font-size: 36rpx;
          font-weight: bold;
        }
      }
      .discount{
        font-size: 26rpx;
        color: #999;
        margin-left: 14rpx;
        text-decoration: line-through;
      }
      .span{
        font-size: 24rpx;
        color: #999;
      }
    }
    .submit{
      height: 110rpx;
      width: 200rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      color: #999;
      &.active{
        background: linear-gradient(0deg, #FBD220, #FFE23E);
        color: #3D3D3D;
      }
    }
  }
  .cart-content{
    max-height: 60vh;
    display: flex;
    flex-direction: column;
    padding-bottom: 110rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 110rpx);
    padding-bottom:  calc(env(safe-area-inset-bottom) + 110rpx);
    .cart-list{
      flex: 1;
      // overflow: auto;
      overflow: hidden;
      .classify-box{
        margin: 0 32rpx;
        border-top: 2rpx solid #eee;
        .classify-title{
          padding: 24rpx 0 24rpx;
          .span{
            font-size: 32rpx;
            color: #333;
          }
          .clear{
            font-size: 26rpx;
            color: #666;
            margin-left: 10rpx;
          }
          .tips{
            font-size: 26rpx;
            color: #999;
            display: flex;
            align-items: center;
            .red{
              color: #FF4B44;
              margin-left: 10rpx;
            }
          }
        }
        .list{
          .cell{
            display: flex;
            padding: 0 0 24rpx;
            &.animate{
              transition: transform .3s;
            }
            &.remove{
              transform: translateX(100%);
            }
            .img{
              width: 120rpx;
              height: 120rpx;
              border-radius: 10rpx;
            }
            .info{
              flex: 1;
              margin-left: 25rpx;
              border-bottom: 2rpx solid #eee;
              padding-bottom: 24rpx;
              .title{
                font-size: 26rpx;
                color: #333;
                line-height: 40rpx;
              }
              .tags{
                display: flex;
                align-items: center;
                margin-top: 8rpx;
                .text{
                  font-size: 20rpx;
                  color: #799CF2;
                  border: 1px solid #799CF2;
                  border-radius: 5rpx;
                  margin-right: 12rpx;
                  padding: 0 6rpx;
                }
                .text:first-child{
                  color: #EF9A3F;
                  border: 1px solid #EF9A3F;
                }
              }
              .bottom-box{
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 20rpx;
                .left{
                  display: flex;
                  align-items: center;
                  .price{
                    font-size: 24rpx;
                    color: #FF6F6A;
                    .strong{
                      font-size: 32rpx;
                      font-weight: bold;
                    }
                  }
                  .num{
                    font-size: 26rpx;
                    color: #666;
                    margin-left: 14rpx;
                  }
                }
                .right{
                  font-size: 26rpx;
                  color: #799CF2;
                }
              }
            }
          }
          // 计数器
          .num-box {
            height: 40rpx;
            .btn {
              width: 36rpx;
              height: 36rpx;
              text-align: center;
              font-size: 32rpx;
              color: #333;
              border-radius: 8rpx;
              display: flex;
              align-items: center;
              justify-content: center;
              box-sizing: border-box;
              font-weight: bold;
            }
            .cont {
              width: 40rpx;
              height: 40rpx;
              margin: 0 16rpx;
              border-radius: 10rpx;
              text-align: center;
              color: #333;
              font-size: 26rpx;
            }
            // 减号
            .less {
              border: 1px solid #ffe23e;
            }
            // 加号
            .add {
              background: #ffe23e;
            }
          }
          .cell:last-child{
            .info{
              border-bottom: none;
              padding-bottom: 0;
            }
          }
        }
      }
      .classify-box:first-child{
        border-top: none;
      }
    }
  }
}
</style>
